<template>
  <div>
    <el-container>
      <!-- 头部查询 -->
      <el-header>
        <div style="width:1100px;">
          <el-input placeholder="id" v-model="id" clearable></el-input>
          <el-input placeholder="姓名" v-model="name" clearable></el-input>
          <template class="data">
            <el-date-picker v-model="startDate" type="date" placeholder="起始日期"> </el-date-picker>
            <el-date-picker v-model="endDate" type="date" placeholder="结束日期"> </el-date-picker>
          </template>
          <el-button type="primary" @click="serchTab(true)">查询</el-button>
          <el-button type="primary" @click="addTab(null)">添加</el-button>
        </div>
        <!-- 中部表格 -->
      </el-header>
      <el-main>
        <el-table :data="tableData" style="width: 100%" border row-key='id'>
          <el-table-column label="序号" width="180" type="index">
          </el-table-column>
          <el-table-column label="id" width="180">
            <template slot-scope="scope">
              {{ scope.row.user_id }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="180">
            <template slot-scope="scope">
              {{ scope.row.user_name }}
            </template>
          </el-table-column>
          <el-table-column label="密码" width="180">
            <template slot-scope="scope">
              {{ scope.row.user_password }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="addTab(scope.row.user_id)">编辑</el-button>
              <el-button size="mini" type="danger" @click="del(scope.row.user_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer style="text-align: center;">
        <!-- 底部跳转 -->
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
          layout="prev, pager, next, jumper" :total="allTotal">
        </el-pagination>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import {
    getHomeTab,
    getNumber,
    delTab,
    addTab,
    updateTab,
    serchTab,
    serchTabNum
  } from '@/api/api'
  export default {
    name: 'Task',
    data() {
      return {
        id: '',
        name: '',
        startDate: '',
        endDate: '',
        tableData: [],
        addName: '',
        addPwd: '',
        addDateOfBirth: '',
        addEnd: '',
        ifName: null,
        ifPwd: null,
        ifDate: null,
        currentPage: 1,
        allTotal: 0, //有多少个数据
        chaIf: false,
        pageSize: 5, //每页展示的数量
      }
    },
    methods: {
      //密码失去焦点时
      pwdYan() {
        this.addPwd = document.getElementById("addPwd").value;
        let validationPwd = document.querySelector('.validationPwd');
        let patrn = /^[0-9]{1,20}$/;
        let patrn2 = /^((\w)*(?=.*[a-z])(?=.*[A-Z])(\w)*)$/;
        let addIf;
        if (patrn.exec(this.addPwd)) {
          addIf = false;
          validationPwd.innerText = '不能全为数字';
        } else if (!patrn2.exec(this.addPwd)) {
          validationPwd.innerText = '密码必须要包含一个大写字母和一个小写字母，密码不能为符号。';
          addIf = false;
        } else if (this.addPwd == '') {
          validationPwd.innerText = '密码不能为空';
          addIf = false;
        } else {
          validationPwd.innerText = '';
          addIf = true;
        }
        this.ifPwd = addIf;
      },
      // 姓名失去焦点赋值
      onCommentInputChange() {
        let addIf;
        this.addName = document.getElementById("commentContent").value;
        if (document.getElementById("commentContent").value == '') {
          document.querySelector('.validationName').innerText = '姓名不能为空';
          addIf = false;
        } else {
          addIf = true;
          document.querySelector('.validationName').innerText = '';
        }
        this.ifName = addIf;
      },
      //日期失去焦点赋值
      dataYan() {
        let addIf;
        this.addDateOfBirth = document.getElementById("addDateOfBirth").value;
        if (this.addDateOfBirth == '') {
          document.querySelector('.validationData').innerText = '日期不能为空';
          addIf = false;
        } else {
          addIf = true;
          document.querySelector('.validationData').innerText = '';
        }
        this.ifDate = addIf;
      },
      //删除单个
      del(id) {
        if (this.tableData.length == 1) this.currentPage = this.currentPage - 1;

        delTab(id).then(el => {
          if (this.chaIf) {
            this.serchTab();
          } else {
            this.getHome();
          }
        });



      },
      // 查询表单

      serchTab(zhuan) {
        if (zhuan) this.currentPage = 1;
        if (this.id == '' && this.name == '' && this.startDate == '' && this.endDate == '') {
          this.getHome();
          this.chaIf = false;
        } else {
          this.chaIf = true;
          serchTabNum({
            'id': this.id | 0,
            'name': this.name + "",
            'create_time': this.startDate,
            'end_time': this.endDate,
          }).then(el => {
            this.allTotal = el.data;
          })
          serchTab({
            'id': this.id | 0,
            'name': this.name + "",
            'create_time': this.startDate,
            'end_time': this.endDate,
            'currentPage': this.currentPage,
            "pageSize": this.pageSize
          }).then(el => {
            this.tableData = el.data;
            this.tableData.forEach(el => {
              let date = (new Date(parseInt(el.create_time)));
              let year = date.getFullYear();
              let month = (date.getMonth() + 1) > 10 ? '-' + (date.getMonth() + 1) : "-0" + (date.getMonth() +
                1);
              let day = date.getDate() > 10 ? '-' + date.getDate() : '-0' + date.getDate();
              el.create_time = year + month + day;
            })
          })
        }

      },
      // 新增或修改
      addTab(id) {
        let masg = '';

        if (id != null) {
          this.tableData.forEach(el => {
            if (el.user_id == id) {
              this.addName = el.user_name;
              this.addPwd = el.user_password;
              this.addDateOfBirth = el.create_time;
              this.addEnd = el.end_time;
            }
          })
        }
        const h = this.$createElement;
        this.h = h
        this.$msgbox({
          title: '会员',
          message: h('div', {
            attrs: {
              class: 'el-input el-input--suffix',
            },
            style: {
              'width': '100%',
            }
          }, [
            h('span', {
              attrs: {
                class: 'addjia',
              },
            }, '用户姓名'),
            h('input', {
              style: {
                // 'margin-bottom': '40px',
                'width': '320px'
              },
              attrs: {
                type: "text",
                class: 'el-input__inner',
                placeholder: "请输入姓名",
                id: 'commentContent',
                autocomplete: 'off',
              },
              on: {
                input: this.onCommentInputChange
              }
            }, ''),
            h('p', {
              style: {

              },
              attrs: {
                class: 'validationName',
              },
            }, ''),
            h('span', {
              attrs: {
                class: 'addjia',
              },
            }, '用户密码'),
            h('input', {
              style: {
                // 'margin-bottom': '10px',
                'width': '320px'
              },
              attrs: {
                class: 'el-input__inner',
                type: 'password',
                id: 'addPwd',
                placeholder: "请输入密码",
                value: this.addPwd
              },
              value: this.addPwd,
              on: {
                input: this.pwdYan
              }
            }, ' '),
            h('p', {
              style: {

              },
              attrs: {
                class: 'validationPwd',
              },
            }, ''),
            h('span', {
              attrs: {
                class: 'addjia',
              },
            }, '出生日期'),
            h('div', {
              class: 'el-date-editor el-input el-input--prefix el-input--suffix el-date-editor--date'
            }, [
              h("input", {
                style: {},
                attrs: {
                  type: "date",
                  value: this.endReason,
                  class: 'el-input__inner',
                  autocomplete: "off",
                  placeholder: "起始日期",
                  id: 'addDateOfBirth',
                  value: this.addDateOfBirth
                },
                on: {
                  input: this.dataYan
                },
                value: this.addDateOfBirth,
              })
            ]),
            h('p', {
              style: {

              },
              attrs: {
                class: 'validationData',
              },
            }, ''),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') { //验证判断添加是为成功
              this.onCommentInputChange();
              this.pwdYan();
              this.dataYan();
              if (this.ifPwd && this.ifName && this.ifDate) {
                if (id != null) { //判断是添加还是修改
                  masg = '修改';
                  updateTab({
                    'user_id': id,
                    'user_name': this.addName,
                    'user_password': this.addPwd,
                    'create_time': Date.parse(new Date(this.addDateOfBirth)),
                  }).then(el => {
                    if (this.chaIf) {
                      this.serchTab();
                    } else this.getHome();
                  })

                } else {
                  masg = '添加';
                  addTab({
                    'user_id': id,
                    'user_name': this.addName,
                    'user_password': this.addPwd,
                    'create_time': Date.parse(new Date(this.addDateOfBirth)),
                  }).then(el => {
                    if (this.chaIf) {
                      this.serchTab();
                    } else this.getHome();
                  })
                }
                done();
              }
            } else {
              done();
            }
          }
        }).then(action => {
          this.addName = '';
          this.addPwd = '';
          this.addEnd = '';
          this.addDateOfBirth = '';
          this.$message({
            type: 'success',
            message: 'tab:' + masg + '成功'
          });
        }, () => { //取消回调
          this.addName = '';
          this.addPwd = '';
          this.addEnd = '';
          this.addDateOfBirth = '';
          document.getElementById("addPwd").value = '';
          document.getElementById("commentContent").value = '';
          document.getElementById("addDateOfBirth").value = '';
          document.querySelector('.validationPwd').innerText = '';
          document.querySelector('.validationData').innerText = '';
          document.querySelector('.validationName').innerText = '';
        });
        setTimeout(() => {
          document.getElementById("addPwd").value = this.addPwd;
          document.getElementById("commentContent").value = this.addName;
          document.getElementById("addDateOfBirth").value = this.addDateOfBirth;
        }, 100)
      },
      // 页面跳转获取新数据
      handleCurrentChange() {
        if (this.chaIf) {
          this.serchTab();
        } else this.getHome();
      },
      getHome() {
        //获取全部的数值

        getNumber().then(el => {
          this.allTotal = el.data;

        })
        getHomeTab({
          'currentPage': this.currentPage,
          'pageSize': this.pageSize
        }).then(table => {
          this.tableData = table.data;
          this.tableData.forEach(el => {
            let date = (new Date(parseInt(el.create_time)));
            let year = date.getFullYear();
            let month = (date.getMonth() + 1) > 10 ? '-' + (date.getMonth() + 1) : "-0" + (date.getMonth() + 1);
            let day = date.getDate() > 10 ? '-' + date.getDate() : '-0' + date.getDate();
            el.create_time = year + month + day;
          })

        });
      }
    },
    created() {
      //获取第一页
      this.getHome();
    },
    watch: {}
  }

</script>

<style scoped>
  .el-input {
    width: 200px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .addjia {
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
  }

  .validationPwd,
  .validationName,
  .validationData {
    height: 20px;
    color: red;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 12px;
  }

</style>
